<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
    <!--        <h2 :style="{opacity}">欢迎学习Vue</h2>-->
    <h2 :style="style">欢迎学习Vue</h2>

</div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false;
    const vm = new Vue({
        el: '#root',
        data() {
            return {
                opacity: 1,
                style: {
                    opacity: 1,
                }
            }
        },
        computed: {},
        methods: {},
        watch: {},
        filters: {},
        mounted(){
            setInterval(() => {
                this.style.opacity -= 0.01;
                if (this.style.opacity <= 0) {
                    this.style.opacity = 1;
                }
            }, 20);
        }
    });

    // 不推荐
    /*setInterval(() => {
        vm.style.opacity -= 0.01;
        if (vm.style.opacity <= 0) {
            vm.style.opacity = 1;
        }
    }, 10);*/
</script>
</html>